﻿<div id="weatherStation" class="row panel panel-active" style="background: white;">
    <div class="panel-heading panel-active pointer clearfix" ng-click="ctrl.setActivePanel('weatherStation')">
        <span class="panel-title pull-left">{{ctrl.localizationService.get('UI.WeatherStation')}}</span>
    </div>

    <div class="container-fluid" style="margin: 10px;">
        <div class="row">
            <div class="col-xs-3 text-center">
                <span class="weather-station-icon text-center fas fa-thermometer-half"></span>
                <br />
                <span class="text-center">{{(ctrl.getGlobalVariable('outdoor.temperature') | number:1) + '°C' }}</span>
            </div>
            <div class="col-xs-3 text-center">
                <span class="weather-station-icon text-center fas fa-tint"></span>
                <br />
                <span class="text-center">{{(ctrl.getGlobalVariable('outdoor.humidity') | number:0) + '%'}}</span>
            </div>
            <div class="col-xs-3 text-center">
                <span class="weather-station-icon text-center fas fa-sun"></span>
                <br />
                <span class="text-center">{{ctrl.getGlobalVariable('outdoor.sunrise').substring(0, 5)}}</span>
            </div>
            <div class="col-xs-3 text-center">
                <span class="weather-station-icon text-center fas fa-moon"></span>
                <br />
                <span class="text-center">{{ctrl.getGlobalVariable('outdoor.sunset').substring(0, 5)}}</span>
            </div>
        </div>

        <div ng-show="ctrl.getGlobalVariable('outdoor.condition.image_url', null)!=null" class="row" style="margin-top: 10px;">
            <div class="col-xs-12 text-center">
                <img class="weather-condition-image" ng-src="{{ctrl.getGlobalVariable('outdoor.condition.image_url')}}" />
            </div>
        </div>
    </div>
</div>